<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>多样式广告展示 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --secondary: #ec4899;
            --accent: #f59e0b;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #94a3b8;
            --border: #e2e8f0;
            --success: #10b981;
            --danger: #ef4444;
            --ad-badge: #ff6b35;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f7fa;
            color: var(--dark);
            padding-top: 56px;
            padding-bottom: 20px;
        }
        
        /* 顶部导航 */
        .navbar {
            height: 56px;
            background-color: white;
            border-bottom: 1px solid var(--border);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        
        .navbar-brand {
            font-weight: 600;
            font-size: 1.25rem;
            color: var(--primary);
        }
        
        /* 广告容器 */
        .ad-container {
            padding: 16px;
        }
        
        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 24px 0 16px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        /* 通用广告样式 */
        .ad-card {
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 16px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .ad-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background-color: var(--ad-badge);
            color: white;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 500;
            z-index: 10;
        }
        
        .ad-cta {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        
        .ad-cta-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .ad-cta-primary:hover {
            background-color: #4338ca;
            color: white;
        }
        
        .ad-cta-secondary {
            background-color: var(--light);
            color: var(--primary);
            border: 1px solid var(--primary);
        }
        
        .ad-cta-secondary:hover {
            background-color: #f1f5f9;
            color: var(--primary);
        }
        
        /* 1. 横幅广告 */
        .banner-ad {
            height: 180px;
            position: relative;
            overflow: hidden;
        }
        
        .banner-ad img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .banner-ad .ad-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
            padding: 20px 16px 12px;
        }
        
        .banner-ad .ad-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .banner-ad .ad-desc {
            font-size: 0.85rem;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        
        /* 2. 卡片式广告（左图右文） */
        .card-horizontal {
            display: flex;
            height: 140px;
        }
        
        .card-horizontal .ad-media {
            width: 40%;
            flex-shrink: 0;
        }
        
        .card-horizontal .ad-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-horizontal .ad-content {
            width: 60%;
            padding: 16px;
            display: flex;
            flex-direction: column;
        }
        
        .card-horizontal .ad-title {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 6px;
            line-height: 1.3;
        }
        
        .card-horizontal .ad-desc {
            font-size: 0.8rem;
            color: var(--gray);
            margin-bottom: auto;
            line-height: 1.4;
        }
        
        .card-horizontal .ad-cta {
            align-self: flex-start;
            margin-top: 8px;
            padding: 4px 12px;
            font-size: 0.8rem;
        }
        
        /* 3. 大图广告 */
        .large-image-ad .ad-media {
            height: 220px;
        }
        
        .large-image-ad .ad-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .large-image-ad .ad-content {
            padding: 16px;
        }
        
        .large-image-ad .ad-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .large-image-ad .ad-desc {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        .large-image-ad .ad-actions {
            display: flex;
            gap: 12px;
        }
        
        /* 4. 多图网格广告 */
        .grid-ad .ad-header {
            padding: 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .grid-ad .ad-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .grid-ad .ad-desc {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .grid-ad .ad-media {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background-color: var(--border);
        }
        
        .grid-ad .ad-media img {
            width: 100%;
            height: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
        }
        
        .grid-ad .ad-footer {
            padding: 12px 16px;
            text-align: center;
            border-top: 1px solid var(--border);
        }
        
        /* 5. 无图文字广告 */
        .text-only-ad {
            padding: 20px 16px;
        }
        
        .text-only-ad .ad-title {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--primary);
        }
        
        .text-only-ad .ad-desc {
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        
        .text-only-ad .ad-highlights {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .text-only-ad .highlight {
            flex: 1;
            text-align: center;
            padding: 8px;
            background-color: #f0f9ff;
            border-radius: 8px;
        }
        
        .text-only-ad .highlight-value {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .text-only-ad .highlight-label {
            font-size: 0.75rem;
            color: var(--gray);
        }
        
        .text-only-ad .ad-cta {
            width: 100%;
            text-align: center;
            padding: 10px 0;
        }
        
        /* 6. 视频广告卡片 */
        .video-ad .ad-media {
            position: relative;
            height: 200px;
        }
        
        .video-ad .ad-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .video-ad .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .video-ad .video-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .video-ad .ad-content {
            padding: 16px;
        }
        
        .video-ad .ad-title {
            font-weight: 600;
            margin-bottom: 6px;
        }
        
        .video-ad .ad-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* 7. 促销标签广告 */
        .promo-ad {
            border: 2px solid var(--secondary);
        }
        
        .promo-ad .promo-badge {
            position: absolute;
            top: -10px;
            right: 16px;
            background-color: var(--secondary);
            color: white;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
        }
        
        .promo-ad .ad-content {
            padding: 20px 16px 16px;
            text-align: center;
        }
        
        .promo-ad .discount {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--secondary);
            line-height: 1;
            margin-bottom: 8px;
        }
        
        .promo-ad .ad-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .promo-ad .ad-desc {
            color: var(--gray);
            margin-bottom: 16px;
            font-size: 0.85rem;
        }
        
        .promo-ad .countdown {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .promo-ad .countdown-box {
            width: 36px;
            height: 36px;
            background-color: var(--dark);
            color: white;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1rem;
        }
        
        .promo-ad .countdown-label {
            font-size: 0.7rem;
            color: var(--gray);
            text-align: center;
        }
        
        /* 8. 品牌故事广告 */
        .story-ad {
            background-color: var(--light);
        }
        
        .story-ad .brand-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .story-ad .brand-logo {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .story-ad .brand-info .brand-name {
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .story-ad .brand-info .brand-motto {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .story-ad .story-content {
            padding: 16px;
            font-size: 0.9rem;
            line-height: 1.6;
        }
        
        .story-ad .story-content p {
            margin-bottom: 12px;
        }
        
        .story-ad .story-content p:last-child {
            margin-bottom: 0;
        }
        
        .story-ad .story-footer {
            padding: 12px 16px;
            border-top: 1px solid var(--border);
            text-align: center;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 0.85rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <nav class="navbar navbar-light">
        <div class="container-fluid justify-content-center">
            <a class="navbar-brand" href="#">多样式广告展示</a>
        </div>
    </nav>
    
    <!-- 广告内容容器 -->
    <div class="ad-container">
        <!-- 1. 横幅广告 -->
        <h3 class="section-title"><i class="fas fa-bullhorn"></i> 横幅广告</h3>
        <div class="ad-card banner-ad">
            <span class="ad-badge">推广</span>
            <img src="https://picsum.photos/id/237/800/400" alt="夏季大促">
            <div class="ad-content">
                <div class="ad-title">夏季时尚大促</div>
                <div class="ad-desc">全场服饰3折起，满300减100</div>
                <a href="#" class="ad-cta ad-cta-primary">立即查看</a>
            </div>
        </div>
        
        <!-- 2. 卡片式广告（左图右文） -->
        <h3 class="section-title"><i class="fas fa-id-card"></i> 卡片式广告</h3>
        <div class="ad-card card-horizontal">
            <span class="ad-badge">广告</span>
            <div class="ad-media">
                <img src="https://picsum.photos/id/96/400/400" alt="智能手表">
            </div>
            <div class="ad-content">
                <div class="ad-title">全新智能手表，健康监测更精准</div>
                <div class="ad-desc">支持心率、血氧、睡眠监测，续航长达14天</div>
                <a href="#" class="ad-cta ad-cta-secondary">了解详情</a>
            </div>
        </div>
        
        <!-- 3. 大图广告 -->
        <h3 class="section-title"><i class="fas fa-image"></i> 大图广告</h3>
        <div class="ad-card large-image-ad">
            <span class="ad-badge">精选</span>
            <div class="ad-media">
                <img src="https://picsum.photos/id/42/800/500" alt="海岛度假">
            </div>
            <div class="ad-content">
                <div class="ad-title">马尔代夫海岛度假套餐</div>
                <div class="ad-desc">
                    5天4晚豪华套餐，含往返机票+五星级酒店+接送服务，限时特惠立减2000元，
                    体验阳光沙滩与清澈海水的完美结合。
                </div>
                <div class="ad-actions">
                    <a href="#" class="ad-cta ad-cta-primary">立即预订</a>
                    <a href="#" class="ad-cta ad-cta-secondary">查看行程</a>
                </div>
            </div>
        </div>
        
        <!-- 4. 多图网格广告 -->
        <h3 class="section-title"><i class="fas fa-th"></i> 多图网格广告</h3>
        <div class="ad-card grid-ad">
            <span class="ad-badge">新品</span>
            <div class="ad-header">
                <div class="ad-title">夏季新品服饰系列</div>
                <div class="ad-desc">多款潮流单品，限时尝鲜价</div>
            </div>
            <div class="ad-media">
                <img src="https://picsum.photos/id/21/300/300" alt="服装1">
                <img src="https://picsum.photos/id/22/300/300" alt="服装2">
                <img src="https://picsum.photos/id/23/300/300" alt="服装3">
                <img src="https://picsum.photos/id/24/300/300" alt="服装4">
                <img src="https://picsum.photos/id/25/300/300" alt="服装5">
                <img src="https://picsum.photos/id/26/300/300" alt="服装6">
            </div>
            <div class="ad-footer">
                <a href="#" class="ad-cta ad-cta-primary">查看全部</a>
            </div>
        </div>
        
        <!-- 5. 无图文字广告 -->
        <h3 class="section-title"><i class="fas fa-file-alt"></i> 文字广告</h3>
        <div class="ad-card text-only-ad">
            <span class="ad-badge">优惠</span>
            <div class="ad-title">2023年度会员限时特惠</div>
            <div class="ad-desc">
                现在加入会员即可享受全年专属优惠，包括购物折扣、免费配送、专属客服等多项权益，
                新用户首月仅需9.9元体验全部特权。
            </div>
            <div class="ad-highlights">
                <div class="highlight">
                    <div class="highlight-value">9.9元</div>
                    <div class="highlight-label">首月体验</div>
                </div>
                <div class="highlight">
                    <div class="highlight-value">8折</div>
                    <div class="highlight-label">全场折扣</div>
                </div>
                <div class="highlight">
                    <div class="highlight-value">12项</div>
                    <div class="highlight-label">专属权益</div>
                </div>
            </div>
            <a href="#" class="ad-cta ad-cta-primary">立即开通</a>
        </div>
        
        <!-- 6. 视频广告卡片 -->
        <h3 class="section-title"><i class="fas fa-video"></i> 视频广告</h3>
        <div class="ad-card video-ad">
            <span class="ad-badge">视频</span>
            <div class="ad-media">
                <img src="https://picsum.photos/id/96/800/450" alt="产品视频封面">
                <div class="play-button">
                    <i class="fas fa-play"></i>
                </div>
                <div class="video-duration">01:35</div>
            </div>
            <div class="ad-content">
                <div class="ad-title">全新一代无线蓝牙耳机深度评测</div>
                <div class="ad-meta">
                    <span>观看 12.5万次</span>
                    <span>3天前</span>
                </div>
            </div>
        </div>
        
        <!-- 7. 促销标签广告 -->
        <h3 class="section-title"><i class="fas fa-tag"></i> 促销广告</h3>
        <div class="ad-card promo-ad">
            <span class="ad-badge">特惠</span>
            <span class="promo-badge">限时</span>
            <div class="ad-content">
                <div class="discount">50%</div>
                <div class="ad-title">年度最大力度折扣</div>
                <div class="ad-desc">精选商品限时半价，错过再等一年</div>
                <div class="countdown">
                    <div class="countdown-box">23</div>
                    <div class="countdown-box">59</div>
                    <div class="countdown-box">45</div>
                </div>
                <div class="countdown-label">剩余时间</div>
                <a href="#" class="ad-cta ad-cta-primary">立即抢购</a>
            </div>
        </div>
        
        <!-- 8. 品牌故事广告 -->
        <h3 class="section-title"><i class="fas fa-book"></i> 品牌故事广告</h3>
        <div class="ad-card story-ad">
            <span class="ad-badge">品牌</span>
            <div class="brand-header">
                <div class="brand-logo">E</div>
                <div class="brand-info">
                    <div class="brand-name">EcoLife 环保生活</div>
                    <div class="brand-motto">让环保成为一种生活方式</div>
                </div>
            </div>
            <div class="story-content">
                <p>
                    EcoLife 创立于2015年，由一群热爱自然的年轻人组建，我们相信环保不只是一种理念，
                    更应该融入日常生活的每一个细节。
                </p>
                <p>
                    从最初的可降解餐具，到现在的全系列环保家居产品，我们始终坚持使用可再生材料，
                    每售出一件产品，我们都会为地球种植一棵树。
                </p>
            </div>
            <div class="story-footer">
                <a href="#" class="ad-cta ad-cta-secondary">了解更多</a>
            </div>
        </div>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 显示提示消息
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 绑定广告点击事件
        document.querySelectorAll('.ad-card, .ad-cta').forEach(element => {
            element.addEventListener('click', function(e) {
                // 避免内部按钮重复触发
                if (e.target.closest('.ad-cta')) {
                    const ctaText = e.target.closest('.ad-cta').textContent.trim();
                    showToast(`已${ctaText}`);
                } else if (!e.target.closest('.play-button')) {
                    showToast('查看广告详情');
                }
            });
        });
        
        // 视频播放按钮
        document.querySelector('.play-button').addEventListener('click', function() {
            showToast('视频广告开始播放');
        });
    </script>
</body>
</html>
